<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>系统管理-讲师列表</title>
    <link th:href="@{/c/base.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/c/toefl.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/c/bootstrap.min.css}" rel="stylesheet" type="text/css">
    <script type="text/javascript" th:src="@{/j/jquery-2.1.0.js}"></script>
    <script type="text/javascript" th:src="@{/j/bootstrap.min.js}"></script>
    <script type="text/javascript" th:src="@{/j/lrtk.js}"></script>
    <script th:src="@{/webjars/vue/2.6.12/vue.js}" type="text/javascript"></script>
    <script type="text/javascript" th:src="@{/webjars/axios/0.21.1/dist/axios.js}"></script>
    <script th:src="@{/js/pagination.js}" type="text/javascript"></script>
    <link th:href="@{/css/pagination.css}" type="text/css" rel="stylesheet">
</head>
<body>
<div id="app">
    <div class="doc1180 paddingT20 fn-clear container">
        <div>
            <form class="form-inline">
                <div class="form-group">
                    <label for="exampleInputName2">用户名</label>
                    <input type="text" class="form-control" v-model="username" id="exampleInputName2" placeholder="用户名">
                </div>
                <div class="form-group">
                    <label for="exampleInputStatus">状态</label>
                    <select class="form-control" v-model="status" id="exampleInputStatus">
                        <option value="1">正常</option>
                        <option value="2">冷冻</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="exampleInputLevel">等级</label>
                    <select class="form-control" v-model="Level" id="exampleInputLevel">
                        <option value="1">初出茅庐</option>
                        <option value="2">小试牛刀</option>
                        <option value="3">初入江湖</option>
                        <option value="4">久经沙场</option>
                        <option value="5">一统天下</option>
                    </select>
                </div>
                <button type="button" @click="loadList(1,5)" class="btn btn-primary">搜索</button>
            </form>
        </div>
        <div class="myPost_Theme" style="height: 80vh;margin-top: 50px;">
            <table width="100%" border="0" cellspacing="0" cellpadding="0" class="myPost_Table">
                <tr class="myPost_Th">
                    <th><input type="checkbox" name="" id="" value=""/></th>
                    <th>头像</th>
                    <th>用户名称</th>
                    <th>性别</th>
                    <th>邮箱</th>
                    <th>电话</th>
                    <th>出生日期</th>
                    <th>注册时间</th>
                    <th>等级</th>
                    <th>状态</th>
                </tr>
                <tr v-for="user in userList">
                    <td><input type="checkbox" v-model="userIdList" :value="user.id"/></td>
                    <td class="myPost_ThemeTitle"><img src="../i/30x30.png"></td>
                    <td>
                        <a style="color: red;" href="../个人资料/普通用户-首页.html">{{user.nickName==null?'':user.nickName}}</a>
                    </td>
                    <td>
                        {{user.sex==null?'':user.sex}}
                    </td>
                    <td>{{user.email==null?'':user.email}}</td>
                    <td>{{user.phoneNumber==null?'':user.phoneNumber}}</td>
                    <td>{{user.birthday==null?'':user.birthday}}</td>
                    <td>{{user.registrationTime==null?'':user.registrationTime}}</td>
                    <td>{{user.level.name}}</td>
                    <td>{{user.status==1?'正常':user.status==2?'冷冻':'禁用'}}</td>
                </tr>
            </table>
            <div class="" style="margin-top: 40px;width: 400px; float: left;">
                <a @click="updateUserStatus(2)" class="btn btn-success">冷冻</a>
                <a @click="updateUserStatus(1)" class="btn btn-primary">解冻</a>
                <a @click="deleteUser" class="btn btn-danger">删除</a>
            </div>
            <div id="pages" >

            </div>
        </div>
    </div>
</div>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            userList: [],
            userIdList:[],
            username:"",
            status:"1",
            Level:"1",
        },
        methods:{
            deleteUser:function(){
                axios.get("http://localhost:9527/adminUser/deleteUser?id="+vue.userIdList).then(function (response) {
                    if(response.data==true){
                        alert("删除成功");
                        location.href="/admin/admin-user";
                    }else{
                        alert("删除失败")
                    }
                }).catch(function (error) {
                    console.log(error)
                })
            },
            updateUserStatus:function(status){
                axios.get("http://localhost:9527/adminUser/updateUser?id="+vue.userIdList+"&status="+status).then(function (response) {
                    if(response.data==true){
                        alert("修改成功");
                        location.href="/admin/admin-user";
                    }else{
                        alert("修改失败")
                    }
                }).catch(function (error) {
                    console.log(error)
                })
            },
            loadList:function(page,size){
                axios.get("http://localhost:9527/adminUser/userList",{
                    params:{
                            username:this.username,
                            status:this.status,
                            Level:this.Level,
                            "page":page,
                            "size":size
                    }
                }).then(function (response) {
                    vue.userList = response.data.list;
                    new Pagination({
                        element: '#pages',
                        type: 1,
                        pageIndex: response.data.pageNum,
                        pageSize: response.data.pageSize,
                        pageCount: 5,
                        total: response.data.total,
                        jumper: true,
                        singlePageHide: false,
                        prevText: '上一页',
                        nextText: '下一页',
                        disabled: true,
                        currentChange: function (index) {
                            vue.loadList(index, response.data.pageSize),
                            pageIndex = index;
                            // console.log(index);
                        }
                    })
                }).catch(function (error) {
                    console.log(error)
                })
            }
        },
        mounted: function () {
            axios.get("http://localhost:9527/adminUser/userList").then(function (response) {
                vue.userList = response.data.list;
                new Pagination({
                    element: '#pages',
                    type: 1,
                    pageIndex: response.data.pageNum,
                    pageSize: response.data.pageSize,
                    pageCount: 5,
                    total: response.data.total,
                    jumper: true,
                    singlePageHide: false,
                    prevText: '上一页',
                    nextText: '下一页',
                    disabled: true,
                    currentChange: function (index) {
                        vue.loadList(index, 5);
                        pageIndex = index
                        // console.log(index);
                    }
                })
            }).catch(function (error) {
                console.log(error)
            })
        }
    })
</script>
</body>

</html>